<template>
  <div >
    <!-- 附件 -->
    <el-dialog
      title="附件列表"
      :visible.sync="showEnclosure"
      width="880px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelEnclosure"
      class="dialogPublic">
      <ul class="enclosure_box">
        <li>
          <span>附件名</span><span>时间</span><span>操作</span>
        </li>
        <li v-for="(item,index) in enclosre" :key="index">
          <span>{{item.name}}</span>
          <span>{{item.time}}</span>
          <span @click="yulanPdf($store.state.apiUrl+'file/'+item.url)">预览</span>
        </li>
      </ul>
       <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancelEnclosure">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 预览 -->
    <div v-show="showYuln" class="yulan_box"> 
        <i class="iconB el-icon-close" @click="showYuln=false"></i>
       <iframe :src="yulanUrl" frameborder="0" style="width:100%;height:100%" id="iframeBox"></iframe>
    </div>
  </div>
</template>

<script>

export default {
  name: 'yulan',
  props:{
      enclosre:{
          type:Array,
          default:[]
      }
  },
  components: {  },
  data() {
    return {
       /** **********附件*********/
      showEnclosure:true,//是否显示附件列表
      showYuln:false,//预览
      yulanUrl:'',//预览地址
      /** **********附件结束**********/
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {

    /** **************附件***************/
    cancelEnclosure(){
      this.$emit('closeEnclosure')
    },
    yulanPdf(pdfUrl){
        console.log(pdfUrl)
      this.showYuln=true;
      this.yulanUrl=pdfUrl
    },
    /** **************附件结束***************/
  }
}
</script>
<style scoped lang="scss">
body,html{width: 100%;height: 100%;}
// 附件
.enclosure_box{
  height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  li{height: 30px;display: flex;flex-direction: row;font-size:14px;color:#333;cursor: pointer;
  &:nth-child(1){//开头的标题
    height:50px;line-height: 50px;background: #408080;color:#fff;
    span{
      line-height: 50px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      text-align: center;
      &:nth-child(1){width:50%;}
      &:nth-child(2){width:30%;}
      &:nth-child(3){width: 20%;color:#fff;}
    }
  }
    span{
      line-height: 30px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      text-align: center;
      &:nth-child(1){width:50%;}
      &:nth-child(2){width:30%;}
      &:nth-child(3){width: 20%;color:#1890ff;}
    }
  }
}
//附件预览
.yulan_box{
  position: fixed;
  left: 0;right: 0;top:0;bottom:0;margin: 0 auto;z-index: 100000;margin-top:10vh;
  width: 880px;height: 800px;overflow:hidden;background: #fff;
  padding: 30px;
      .iconB{
      display:inline-block;
      position: absolute;right: 10px;top:10px;
      cursor: pointer;
      font-size: 18px;
    }

}
// .enclosure_box{
//   position: absolute;top:0;left:0;right: 0;bottom: 0; background: #fff;color: #333;padding: 80px 200px;box-sizing:border-box;
//   .enclosure_Body{
//     position: relative;
//     height: 100%;
//     width: 100%;
//     overflow-y: auto;
//     overflow-x: hidden;
//     background: #fff;
//     border:1px solid #c0c0c0;
//     box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
//     .iconB{
//       display:inline-block;
//       position: absolute;right: 0;top:0;
//       cursor: pointer;
//       font-size: 26px;
//     }
//   }
// }
</style>
